<template>
  <div>
    <el-container>
      <el-main style="padding: 20px 50px">
        <el-card class="box-card">
          <el-form :model="logConfigInfo" :rules="rules" ref="logConfigInfo"  label-width="150px" class="demo-ruleForm" >
            <el-form-item label="导出最大条数：" prop="limitLine" class="width-100">
              <el-input-number  class="input-box" v-model="logConfigInfo.limitLine" type="number" :min="10" :max="60000"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('logConfigInfo')" size="small">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import logConfigInfoApi from "./api/sysLogConfig.service";

export default {
  data(){
    return {
      logConfigInfo: {
        limitLine: null,
      },
      rules: {
        limitLine: [
          { required: true, message: '请输入最大条数', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    initData(){
      logConfigInfoApi.getLogConfig().then(res =>{
        if (res.code === 10200){
          this.logConfigInfo.limitLine = res.data.limitLine;
        }
      })
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            limitLine: this.logConfigInfo.limitLine
          };
          logConfigInfoApi.saveLogConfig(obj).then( res=>{
            if (res.code === 10200){
              this.$message.info("保存成功");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style>
  .width-100 .el-form-item__content{
    width: 200px;
  }
</style>
